<template>
  <div>
    <div class="i-box" style="--h: 3rem;">
      <XmolBox title="Xline" style="--freeH: 100%">
        <Xline :seriesData="seriesData" :xAxis="xAxis" dateFormat="YYYY.M" yUnit="数量(头)" v-if="showChart"></Xline>
      </XmolBox>
    </div>

    <section class="content mt10">
      <div>
        <p class="tt">代码示例</p>
        <div v-text='`<Xline :seriesData="seriesData" :xAxis="xAxis" dateFormat="YYYY.M" yUnit="数量(头)" v-if="showChart"></Xline>`'></div>
        <p><span class="td">更多参数查看组件</span></p>
      </div>
      <div>
        <p class="tt">处理指标数据方法</p>
        <p><span class="td">方法名：</span> Common.dealLinesData(data, keyMap)</p>
        <p><span class="td">参数<el-tag size="mini" class="ml5" type="info">data</el-tag> ：</span>通用指标接口返回的data数据</p>
        <p><span class="td">返回数据：</span>{ seriesData, xAxis} （具体格式参考如下）</p>
        <p>yIndex: 可指定Y轴，默认0</p>
        <pre style="font-size: 0.1rem" class="col-white2">
          参考：
          {
            "xAxis": [ "2021-08-01", "2021-09-01", "2021-10-01", "2021-11-01", "2021-12-01" ],
            "seriesData": [
              { "name": "母猪存栏", "data": [ "4120.0", "4850.0", "4720.0", "4420.0", "4490.0" ] },
              { "name": "仔猪存栏", "yIndex": "1", "data": [ "2260.0", "3230.0", "2650.0", "2740.0", "4120.0" ] },
              { "name": "肥猪存栏", "data": [ "2530.0", "4630.0", "3420.0", "4020.0", "4360.0" ] }
            ]
          }
        </pre>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 折线图
      seriesData: [],
      xAxis: [],
      showChart: false
    };
  },
  mounted () {
    this.getSeriesData();
  },
  methods: {
    getSeriesData () {
      let res = {'status': {'code': 200, 'msg': '服务请求成功'}, 'data': [{'projectId': 2, 'dt': '2021-08-01', 'indexId': 1, 'indexName': '母猪存栏', 'value': '4120.0'}, {'projectId': 2, 'dt': '2021-08-01', 'indexId': 2, 'indexName': '仔猪存栏', 'value': '2260.0'}, {'projectId': 2, 'dt': '2021-08-01', 'indexId': 3, 'indexName': '肥猪存栏', 'value': '2530.0'}, {'projectId': 2, 'dt': '2021-09-01', 'indexId': 1, 'indexName': '母猪存栏', 'value': '4850.0'}, {'projectId': 2, 'dt': '2021-09-01', 'indexId': 2, 'indexName': '仔猪存栏', 'value': '3230.0'}, {'projectId': 2, 'dt': '2021-09-01', 'indexId': 3, 'indexName': '肥猪存栏', 'value': '4630.0'}, {'projectId': 2, 'dt': '2021-10-01', 'indexId': 1, 'indexName': '母猪存栏', 'value': '4720.0'}, {'projectId': 2, 'dt': '2021-10-01', 'indexId': 2, 'indexName': '仔猪存栏', 'value': '2650.0'}, {'projectId': 2, 'dt': '2021-10-01', 'indexId': 3, 'indexName': '肥猪存栏', 'value': '3420.0'}, {'projectId': 2, 'dt': '2021-11-01', 'indexId': 1, 'indexName': '母猪存栏', 'value': '4420.0'}, {'projectId': 2, 'dt': '2021-11-01', 'indexId': 2, 'indexName': '仔猪存栏', 'value': '2740.0'}, {'projectId': 2, 'dt': '2021-11-01', 'indexId': 3, 'indexName': '肥猪存栏', 'value': '4020.0'}, {'projectId': 2, 'dt': '2021-12-01', 'indexId': 1, 'indexName': '母猪存栏', 'value': '4490.0'}, {'projectId': 2, 'dt': '2021-12-01', 'indexId': 2, 'indexName': '仔猪存栏', 'value': '4120.0'}, {'projectId': 2, 'dt': '2021-12-01', 'indexId': 3, 'indexName': '肥猪存栏', 'value': '4360.0'}]};
      let dealData = this.Common.dealLinesData(res.data, {
        1: {name: '母猪存栏'},
        2: {name: '仔猪存栏', yIndex: 1},
        3: {name: '肥猪存栏'}
      });
      this.seriesData = dealData.seriesData;
      this.xAxis = dealData.xAxis;
      this.showChart = true;
    }
  }
};
</script>
